<template>
  <div id="test"></div>
</template>

<script setup lang="ts">
import useWpage from '@/WLib/WPage/useWpage'
import { WFormItemsConfig } from '@/types/WLib'
import { ElButton } from 'element-plus'

const form = ref({ name: '111' })

const fornItems: WFormItemsConfig[] = [
  {
    type: 'input',
    name: 'name',
    label: '姓名',
  },
  {
    type: 'input',
    name: 'age',
    label: '年龄',
  },
  {
    type: 'input',
    name: 'age1',
    label: '年龄1',
  },
  {
    type: 'input',

    name: 'age2',
    label: '年龄2',
  },
  {
    type: 'input',
    name: 'age3',
    label: '年龄3',
  },
  {
    type: 'select',
    name: 'age4',
    label: '年龄4',
    props: {
      option: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
        {
          label: '选项3',
          value: '3',
        },
      ],
    },
  },
  {
    type: 'slot',
    name: 'cs',
  },
]

const slots = {
  // key 为插槽的name,插槽传参注意解构才能使用
  cs: ({ form }: any) => {
    return h('div', `名字:${form.name}`)
  },
  TableLeftTop: () => {
    return h('div', '这是表格左上角的插槽')
  },
  TableRightTop: () => {
    return h(ElButton, { onClick: () => rightClick(), type: 'primary' }, { default: () => '这是右边的插槽' })
  },
}

const rightClick = () => {
  console.log('点击了右上角的插槽')
}

onMounted(() => {
  const dom = document.getElementById('test') as HTMLElement
  useWpage(
    dom,
    {
      searchFormItems: fornItems,
      searchForm: form,
    },
    slots
  )
})
</script>

<style lang="scss" scoped></style>
